import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI 1.0
import "qrc:/SynoMusicPlayer/Views/Components"

// 底部工具栏
Rectangle {
    height: 60
    Layout.fillWidth: true
    color: FluTheme.dark ? "#2d2d38" : "#EDEDED"

    RowLayout {
        anchors.fill: parent

        Item { // 占位
            Layout.preferredWidth: parent.width/10
            Layout.fillWidth: true
        }

        MusicIconButton {
            Layout.preferredWidth: 50
            iconSource: FluentIcons.Previous
            iconWidth: 16
            iconHeight: 16
            toolTip: "上一首"
        }

        MusicIconButton {
            Layout.preferredWidth: 50
            iconSource: FluentIcons.Play
            iconWidth: 16
            iconHeight: 16
            toolTip: "播放/暂停"
        }

        MusicIconButton {
            Layout.preferredWidth: 50
            iconSource: FluentIcons.Next
            iconWidth: 16
            iconHeight: 16
            toolTip: "下一首"
        }

        Item {
            Layout.preferredWidth: parent.width/2
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.topMargin: 25

            FluText {
                id: nameText
                anchors.left: songSlider.left
                anchors.bottom: songSlider.top
                anchors.leftMargin: 5
                text: "歌曲名—歌手"
            }

            FluText {
                id: timeText
                anchors.right: songSlider.right
                anchors.bottom: songSlider.top
                anchors.rightMargin: 5
                text: "00:00/05:03"
            }

            Slider {
                id: songSlider
                width: parent.width
                Layout.fillWidth: true
                height: 25
                background: Rectangle {
                    x: songSlider.leftPadding
                    y: songSlider.topPadding + (songSlider.availableHeight - height)/2
                    width: songSlider.availableWidth
                    height: 4
                    radius: 2
                    color: "#dadcdf"

                    Rectangle {
                        width: songSlider.visualPosition * parent.width
                        height: parent.height
                        color: "#73A7AB"
                        radius: 2
                    }
                }
                handle: Rectangle{
                    x: songSlider.leftPadding + (songSlider.availableWidth - width)*songSlider.visualPosition
                    y: songSlider.topPadding + (songSlider.availableHeight - height)/2
                    width: 15
                    height: 15
                    radius: 10
                    color: "#F0F0F0"
                    border.color: "#73A7AB"
                    border.width: 0.5
                }
            }
        }

        MusicIconButton {
            Layout.preferredWidth: 50
            iconSource: FluentIcons.Heart
            iconWidth: 16
            iconHeight: 16
            toolTip: "收藏"
        }

        MusicIconButton {
            Layout.preferredWidth: 50
            iconSource: FluentIcons.PlaybackRate1x
            iconWidth: 16
            iconHeight: 16
            toolTip: "循环播放"
        }

        Item { // 占位
            Layout.preferredWidth: parent.width/10
            Layout.fillWidth: true
        }
    }
}
